<template>
  <div>
    <el-button @click="$router.push('/homepage')" round style="font-size: 40px;height: 70px;width: 160px">首 页</el-button>
    <el-divider/>
    <el-card style="width: 80%;height: 100%;margin-left: 10%">
    <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="uid"
        label="用户id"
        width="150">
    </el-table-column>
    <el-table-column
        prop="username"
        label="用户名"
        width="200">
    </el-table-column>
    <el-table-column
        prop="affiliation"
        label="单位"
        width="200">
    </el-table-column>
    <el-table-column
        prop="idnumber"
        label="证件号"
        width="300">
    </el-table-column>
    <el-table-column
        prop="connumber"
        label="联系方式"
        width="300">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="设置管理员"
        width="180">
      <template slot-scope="scope">
        <el-switch
            v-model="admins[scope.$index]"
            @change="update($event,scope.row)">
          设置管理员
        </el-switch>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
  </div>

</template>

<script>
import {getUsers, getAdmins, updateRole} from "@/api/user";
export default {
  name: "UserManagement",
  mounted() {
    this.init()
  },
  methods:{
    update: async ($event, row) => {
      await updateRole({uid: row.uid, role: $event ? 1 : 0})
    },
    init(){
       getUsers().then(res=>{
         this.tableData = res.message;
       })

      getAdmins().then(res=>{
        let admins = res.message
        for(let item of this.tableData){
          for(let admin of admins){
            if(item.uid === admin.uid){
              this.admins.push(true)
              break;
            }
          }
        }
      })

    }
  },
  data(){
    return {
      tableData:[],
      admins:[]
    }
  }
}
</script>

<style scoped>

</style>